<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
</head>
<body>
	<div id="box" style="background: yellow;" class="box2" name="111" huoying="222">
		<h1>陈陈的子元素</h1>
	</div>
	<script type="text/javascript">
		/*
			DOM: document object model 文档对象模型

			1.dom是html的标准模型，通过它，js可以访问和改变html文档里所有元素
			2.dom树
				dom节点对象：
					1.文档节点 document
					2.元素节点 html元素  div a 元素
					3.属性节点 标签的属性 href src alt title。。。
					4.文本节点 标签里面的文字内容 (换行 空格都属于文本)

		*/
		//1.文档节点 document 浏览器在加载页面的时候，会给网页document对象
		// 所有节点都是document对象的子节点
		console.log(document)
		console.dir(document)

		// 2.元素节点 html元素 div a元素
		// 通过id获取元素节点
		let box = document.getElementById("box")
		console.log(box)

		// 3.属性节点 标签的属性 href src alt title...
		//1. 元素节点.属性名 有缺点 类似name属性的无法获取
		//2.元素节点.getAttribute("属性名")
		console.log(box.style)
		// 获取类名
		console.log(box.className)//box2
		console.log(box.id)//box
		console.log(box.name)//undefined
		console.log(box.huoying)//undefined

		console.log(box.getAttribute("name"))//111
		console.log(box.getAttribute("huoying"))//222

		//文本节点 标签里面的文字内容 (换行 空格都属于文本)
		//innerText纯文本
		// innerHTML能识别html
		console.log(box.innerText)//div的子元素
		console.log(box.innerHTML)//<h1>div的子元素</h1>

		// 修改文本节点
		box.innerText = "今日眼光明媚"
		box.innerText ="<h1>今日眼光明媚</h1>"
		box.innerHTML ="<h1 style='color:pink'>今日眼光明媚</h1>"

	</script>
</body>
</html>